<template>
  <div class="app-container home">
    <el-row :gutter="20" class="ip-margin workbench-top">
      <el-col :span="17">
        <el-row :gutter="20">
          <!-- 工作量 -->
          <el-col :span="7">
            <div style="overflow: hidden;height:232px">
              <div class="ip-father" style="height:180px">
                <div class="ip-son-top">
                  <span>
                    <i class="iconfont icon-gongzuo"></i>我的工作量（近30天）
                  </span>
                </div>
                <div class="ip-son-bottom">
                  <div class="ip-flexBox">
                    <div class="ip-flexSon1">
                      <div class="ip-flexSon1-top">{{ workloadData.notFilledIn || 0 }}</div>
                      <div class="ip-flexSon-bottom">未填写</div>
                    </div>
                    <div class="ip-flexSon2">
                      <div class="ip-flexSon2-top">{{ workloadData.pendingApproval || 0 }}</div>
                      <div class="ip-flexSon-bottom">未审批</div>
                    </div>
                    <div class="ip-flexSon3">
                      <div class="ip-flexSon3-top">{{ workloadData.approved || 0 }}</div>
                      <div class="ip-flexSon-bottom">已审批</div>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <img
                  src="@/assets/images/bg-work.png"
                  style="width: 100%; height: 56px"
                  title="放上来干嘛，这里没有彩蛋"
                />
              </div>
            </div>
          </el-col>
          <!-- 考勤 -->
          <el-col :span="8">
            <div class="ip-father" style="height:232px">
              <div class="ip-son-top">
                <span>
                  <i class="iconfont icon-daka"></i> 考勤打卡
                </span>
                <span class="dangerous-progress" style="font-size: 14px">
                  {{ new Date() | date }}
                  <i
                    class="iconfont icon-a-Groupbeifen2"
                    style="font-size: 14px;#8998AC"
                  ></i>
                </span>
              </div>
              <div class="ip-son-bottom ip-block">
                <div v-if="sign.outwork > 0" class="letter">
                  <div class="demo-color-box">
                    <el-steps direction="vertical" :active="1">
                      <el-step
                        title="外勤打卡"
                        :description="sign.outwork + '次'"
                        icon="iconfont icon-circleyuanquan"
                      ></el-step>
                    </el-steps>
                  </div>
                </div>
                <div v-else class="letter">
                  <div class="demo-color-box">
                    <el-steps direction="vertical" :active="2">
                      <el-step
                        title="上班打卡"
                        :description="sign.onduty || '暂无'"
                        icon="iconfont icon-circleyuanquan"
                      ></el-step>
                      <el-step
                        title="下班打卡"
                        :description="sign.offduty || '暂无'"
                        icon="iconfont icon-circleyuanquan"
                      ></el-step>
                    </el-steps>
                  </div>
                </div>
                <div style="padding: 5px 16px 20px 0px">
                  <img src="@/assets/images/qrcode.png" class="blockImg" />
                </div>
              </div>
            </div>
          </el-col>

          <!-- 通知公告 -->
          <el-col :span="9">
            <div class="ip-father" style="padding-bottom: 0;height:232px">
              <div class="ip-son-top">
                <span>
                  <i class="iconfont icon-tongzhi"></i> 通知公告
                </span>
                <router-link
                  to="/admin/readNotice/list"
                  class="dangerous-progress"
                  style="font-size: 14px"
                >
                  更多
                  <i class="iconfont icon-a-Groupbeifen2" style="font-size: 14px;#8998AC"></i>
                </router-link>
              </div>
              <div class="ip-son-scroll">
                <ul
                  class="ip-son-content"
                  v-if="sysNoticeData && sysNoticeData.data && sysNoticeData.data.length > 0"
                >
                  <li
                    v-for="item in sysNoticeData.data"
                    :key="item.categoryId"
                    @click="showNotice(item)"
                  >
                    <i class="iconfont icon-yuandianxiao" style="padding-right: 9px"></i>
                    {{item.isTop==1?'【置顶】':''}}{{ item.title }}
                  </li>
                </ul>
                <div v-else class="scroll-none">
                  <div>暂无数据</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top:20px">
          <el-col>
            <el-tabs
              v-model="activeTabName"
              class="block top-tabs matter-tips"
              style="height: 610px;"
            >
              <el-tab-pane name="/workflow/toDoList/list" class="el-tabs__header">
                <div slot="label" class="tab-text">
                  我的待办
                  <span v-if="waitWorkflowData.recordsTotal > 0" class="badge">
                    {{
                    waitWorkflowData.recordsTotal > 10
                    ? "10+"
                    : waitWorkflowData.recordsTotal
                    }}
                  </span>
                </div>
                <div class="table-box">
                  <el-table
                    v-if="waitWorkflowData.recordsTotal > 0"
                    :data="waitWorkflowData.data"
                    style="width: 100%"
                  >
                    <el-table-column prop="appName" label="待办类型" width="150"></el-table-column>
                    <el-table-column prop="instanceTitle" label="事项描述"></el-table-column>
                    <el-table-column prop="startTime" label="接收时间" width="150"></el-table-column>
                    <el-table-column label="操作" width="60">
                      <template slot-scope="scope">
                        <el-button
                          @click="waitWorkflowHandle(scope.row)"
                          type="text"
                          size="small"
                        >办理</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div v-else>
                    <el-empty description="暂无记录"></el-empty>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane name="/workflow/doneList/list">
                <div slot="label" class="tab-text">
                  我的已办
                  <!-- <span v-if="doneWorkflowData.recordsTotal > 0" class="badge">
                {{
                doneWorkflowData.recordsTotal > 99
                ? "99+"
                : doneWorkflowData.recordsTotal
                }}
                  </span>-->
                </div>
                <div class="table-box">
                  <el-table
                    v-if="doneWorkflowData.recordsTotal > 0"
                    :data="doneWorkflowData.data"
                    style="width: 100%"
                  >
                    <el-table-column prop="appName" label="已办类型" width="150"></el-table-column>
                    <el-table-column prop="instanceTitle" label="事项描述"></el-table-column>
                    <el-table-column prop="startTime" label="接收时间" width="150"></el-table-column>
                    <el-table-column label="操作" width="100">
                      <template slot-scope="scope">
                        <el-button @click="showDoneWorkflow(scope.row)" type="text" size="small">查看</el-button>
                        <el-button @click="back(scope.row)" type="text" size="small">撤回</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div v-else>
                    <el-empty description="暂无记录"></el-empty>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane name="/message/meMessage/list">
                <div slot="label" class="tab-text">
                  我的消息
                  <span
                    v-if="sysMessageData.message != null"
                    class="badge"
                  >{{sysMessageData.message}}</span>
                </div>
                <div class="table-box">
                  <el-table
                    v-if="sysMessageData.recordsTotal > 0"
                    :data="sysMessageData.data"
                    style="width: 100%"
                  >
                    <el-table-column align="center" label="状态" width="60">
                      <template slot-scope="scope">
                        <span>
                          <template v-if="scope.row.readStatus=='read'">
                            <i class="far fa-envelope-open" title="已读"></i>
                          </template>
                          <template v-else>
                            <i class="fas fa-envelope" title="未读"></i>
                          </template>
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="标题">
                      <template slot-scope="scope">
                        <el-link type="primary" @click="showMessage(scope.row)">{{scope.row.title}}</el-link>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="消息类型" width="100">
                      <template slot-scope="scope">
                        <span>
                          <template v-if="scope.row.messageType=='bulletin'">收文</template>
                          <template v-else>站内信</template>
                        </span>
                      </template>
                    </el-table-column>
                    <!-- <el-table-column label="操作" width="60">
                      <template slot-scope="scope">
                        <el-button @click="showMessage(scope.row)" type="text" size="small">查看</el-button>
                      </template>
                    </el-table-column>-->
                  </el-table>
                  <div v-else>
                    <el-empty description="暂无记录"></el-empty>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane disabled="disabled">
                <div slot="label">
                  <router-link :to="activeTabName">更多</router-link>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="7">
        <!-- 年假 -->
        <div style="margin-bottom: 10px; background: #ffffff; padding: 10px 10px">
          <el-popover placement="right" width="400" trigger="hover">
            <el-row>
              <el-col :span="12">年假总数：{{ annualLeaveData.totalDay || 0 }}天</el-col>
              <el-col :span="12">
                剩余年假：{{(
                annualLeaveData.totalDay -
                annualLeaveData.applyedDay -
                annualLeaveData.cashDay)||0
                }}天
              </el-col>
            </el-row>
            <br />
            <el-row>
              <el-col :span="12">已休年假：{{ annualLeaveData.applyedDay || 0 }}天</el-col>
              <el-col :span="12">折现年假：{{ annualLeaveData.cashDay || 0 }}天</el-col>
            </el-row>
            <br />
            <el-row>
              <el-col :span="12">年假延期：{{ annualLeaveData.isDelay ? "已延期" : "无延期" }}</el-col>
              <el-col :span="12">可休年假：{{ annualLeaveData.applyDay || 0 }}天</el-col>
            </el-row>
            <div class="ip-son-top" slot="reference">
              <span style="min-width:110px">
                <i class="iconfont icon-nianjia"></i> 我的年假
              </span>
              <span class="dangerous-progress" style="font-size: 14px; line-height: 25px">
                <span v-if="!annualLeaveData" style="padding-right: 10px">暂无年假</span>
                <span v-else style="padding-right: 10px">
                  <span
                    v-if="annualLeaveData && annualLeaveData.startDate && annualLeaveData.endDate"
                  >
                    {{ annualLeaveData.startDate }}～{{
                    annualLeaveData.isDelay
                    ? annualLeaveData.delayDate
                    : annualLeaveData.endDate
                    }}
                  </span>
                  <el-tag
                    v-if="annualLeaveData && annualLeaveData.isDelay"
                    type="warning"
                    effect="dark"
                    style="margin-right:10px"
                  >已延期</el-tag>
                  <el-tag
                    v-if="annualLeaveData && (new Date(annualLeaveData.delayDate || annualLeaveData.endDate).getTime()-new Date().getTime()<30*24*60*60*1000)"
                    type="danger"
                    effect="dark"
                  >即将到期</el-tag>
                  <span v-if="!annualLeaveData">暂无年假</span>
                </span>
              </span>
            </div>
          </el-popover>
        </div>
        <div class="ip-father index-risk calendar-box">
          <!-- 日程 -->
          <el-calendar v-model="dateValue"></el-calendar>
          <!-- <div class="ip-son-bottom">
            <el-table
              :show-header="false"
              :data="scheduleTasks"
              style="width: 100%; color: black"
              @row-click="scheduleRowClick"
            >
              <el-table-column prop="scheduleTitle" label="标题">
              </el-table-column>
            </el-table>
          </div>-->
          <!-- 今日事项 -->
          <div class="matter">
            <div class="ip-son-top matter-top">
              <span>今日事项&nbsp;&nbsp;&nbsp;&nbsp;{{matter && matter.length}}</span>
              <div>
                <button @click="scheduleVisible = true" style="margin-right:10px">+新建</button>
                <button @click="annualLeave">+更多</button>
              </div>
            </div>
            <ul v-if="matter && matter.length !== 0" class="matter-content">
              <li class="content-item" v-for="item in matter" :key="item.scheduleId">
                <el-link @click="scheduleRowClick(item.scheduleId)">
                  {{ item.scheduleTitle}} {{item.startWarnType}}-{{item.endWarnType}}
                  <i
                    class="el-icon-s-promotion"
                  ></i>
                </el-link>
              </li>
            </ul>
            <div v-else style="text-align:center;line-height:149px;color:#61677A">暂无数据</div>
          </div>
        </div>
        <div class="ip-son-top" style="margin-top: 10px; background: #ffffff; padding: 15px 10px 0">
          <span>
            <i class="iconfont icon-changyongxitong"></i>常用系统
          </span>
          <!-- <span class="dangerous-progress" style="font-size: 14px">
            更多
            <i class="iconfont icon-a-Groupbeifen2" style="font-size: 14px;#8998AC"></i>
          </span>-->
        </div>
        <div class="block week-quick">
          <div class="icon-quick">
            <el-row :gutter="20" class="system">
              <el-col :span="12" v-for="s in systems" :key="s.title" class="system-col">
                <a @click="openUrl(s.url)">
                  <el-card shadow="hover" class="quick-color" :body-style="{ padding: '7px 10px' }">
                    <span :class="s.class">{{ s.iconText }}</span>
                    {{ s.title }}
                  </el-card>
                </a>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 新增日程 -->
    <addCalender
      :model="model"
      :time="time"
      @handleClick="handleClick"
      @fCancel="scheduleVisible = false"
      @fSubmit="fSubmit"
      @scheduleclose="scheduleVisible = false"
      :scheduleVisiblePreve="scheduleVisible"
    ></addCalender>

    <vxe-modal
      v-model="particularsView"
      :resize="true"
      width="500"
      height="600"
      :title="viewModel.scheduleTitle"
      show-zoom
      destroy-on-close
      :showFooter="false"
      :loading="particularsViewLoading"
      @close="particularsClose"
    >
      <el-tabs v-model="particularName" @tab-click="particularClick">
        <el-tab-pane label="安排详情" name="detail">
          <el-row style="margin-top: 10px">位 置：{{ this.viewModel.adrress }}</el-row>
          <el-row style="margin-top: 10px">
            起止时间：{{ this.viewModel.startTime }} -
            {{ this.viewModel.endTime }}
          </el-row>
          <el-row style="margin-top: 10px">开始提醒：{{ this.viewModel.startWarnType }}</el-row>
          <el-row style="margin-top: 10px">结束提醒：{{ this.viewModel.endWarnType }}</el-row>
          <el-row style="margin-top: 10px">
            负责人：
            <template v-for="user in participant">
              <el-tag
                type="warning"
                effect="dark"
                v-if="user.userType == 'principal'"
                :key="user.userName"
                style="margin: 5px"
              >{{ user.userName }}</el-tag>
            </template>
          </el-row>
          <el-row style="margin-top: 10px">
            参与人：
            <template v-for="user in participant">
              <el-tag
                effect="dark"
                v-if="user.userType == 'participant'"
                :key="user.userName"
                style="margin: 5px"
              >{{ user.userName }}</el-tag>
            </template>
          </el-row>
          <el-row style="margin-top: 10px">关联类型：{{ this.viewModel.dataType }}</el-row>
          <el-row style="margin-top: 10px">关联业务名称：{{ this.viewModel.dataTitle }}</el-row>
          <el-row style="margin-top: 10px">详细描述：{{ this.viewModel.memo }}</el-row>
          <el-row
            v-if="viewModel.scheduleType == 'task'"
            style="margin-top: 10px"
          >任务完成情况：{{ this.viewModel.taskStatus }}</el-row>
          <el-row>
            <el-col :span="24">
              <qm-file-upload
                :dataKey="this.viewModel.scheduleId"
                title="附件上传"
                :editable="false"
                fileSize="20"
                fileType=".jpg,.png,.doc,.docx,.xls,.xlsx,.pdf,.txt,.zip,.rar"
                viewType="office"
              ></qm-file-upload>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane v-if="viewModel.scheduleType == 'task'" label="处理情况" name="dispose">
          <div v-for="item in disposeData" :key="item.resultId" style="margin-top: 10px">
            <el-row>
              <el-button type="info" icon="el-icon-user-solid">{{ item.userId }}</el-button>
            </el-row>
            <el-row>完成情况：{{ item.taskStatus }}</el-row>
            <el-row>登记时间{{ item.finishDate }}</el-row>
            <el-row>详细描述：{{ item.memo }}</el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </vxe-modal>

    <vxe-modal
      v-model="noticeView"
      :resize="true"
      width="1024"
      height="600"
      title="通知详情"
      show-zoom
      destroy-on-close
      :showFooter="false"
      :loading="noticeViewLoading"
    >
      <div>
        <el-row type="flex" justify="center">
          <h2>{{ sysNoticeDetails.title }}</h2>
        </el-row>
        <el-row type="flex" justify="center">
          <span>
            发布时间:
            {{ sysNoticeDetails.publishTime | date }}
          </span>
          <span
            v-if="sysNoticeDetails.availableStartTime && sysNoticeDetails.availableEndTime"
            style="margin-left: 15px"
          >
            有效期:
            {{ sysNoticeDetails.availableStartTime | date }}
            至
            {{ sysNoticeDetails.availableEndTime | date }}
          </span>
          <span style="margin-left: 15px">分类:{{ sysNoticeDetails.categoryName}}</span>
        </el-row>
        <el-row>
          <el-col :span="24">
            <editor v-model="sysNoticeDetails.content" :globalOptions="{}" :disabled="true" />
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="24" style="padding: 0px 15px">
            <qm-file-upload
              :dataKey="sysNoticeDetails.noticeId"
              :editable="false"
              title="附件上传"
              fileSize="20"
              fileType=".jpg,.png,.doc,.docx,.xls,.xlsx,.pdf,.txt,.zip,.rar"
              viewType="office"
            ></qm-file-upload>
          </el-col>
        </el-row>
      </div>
    </vxe-modal>

    <vxe-modal
      v-model="messageView"
      :resize="true"
      width="1024"
      height="600"
      title="消息详情"
      show-zoom
      destroy-on-close
      :showFooter="false"
      @close="messageClose"
      :loading="messageViewLoading"
    >
      <MeMessageView :model="sysMessageModels"></MeMessageView>
      <!-- <create :models="sysMessageModels" :controlData="sysMessageControlData" :disabled="true"></create> -->
    </vxe-modal>

    <el-dialog
      title="完善个人档案信息"
      width="900px"
      center
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="profile.notFilled"
      v-if="profile.notFilled && !profile.isChangePassword"
    >
      <el-alert
        v-if="profile.model.reserved3"
        :title="`请按要求完善您的个人信息：${profile.model.reserved3}`"
        type="error"
        show-icon
        style="margin-bottom:10px"
      ></el-alert>
      <el-form label-width="150px" ref="profileForm" :model="profile.model" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码：" prop="mobile">
              <el-input v-model.number="profile.model.mobile" placeholder="请输入手机号码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="籍贯：" prop="nativePlace">
              <qm-cascader
                v-model="profile.model.nativePlace"
                :props="{ expandTrigger: 'hover' }"
                data-type="province"
                placeholder="请选择"
              ></qm-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="民族：" prop="nation">
              <!-- <el-input v-model="profile.model.nation" placeholder="请输入民族"></el-input> -->
              <el-select filterable v-model="profile.model.nation" placeholder="请选择">
                <el-option
                  v-for="item in nationOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="户籍类型：" prop="householdType">
              <el-select v-model="profile.model.householdType" placeholder="请选择">
                <el-option
                  v-for="item in profile.householdTypes"
                  :key="item.key"
                  :label="item.key"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="婚姻状况：" prop="maritalStatus">
              <el-select v-model="profile.model.maritalStatus" placeholder="请选择">
                <el-option label="未婚" value="UNMARRIED"></el-option>
                <el-option label="已婚" value="MARRIED"></el-option>
                <el-option label="离异" value="DIVORCE"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="政治面貌：" prop="politicalStatus">
              <el-select v-model="profile.model.politicalStatus" placeholder="请选择">
                <el-option label="群众" value="MASSES"></el-option>
                <el-option label="团员" value="LEAGUE_MEMBER"></el-option>
                <el-option label="党员" value="PARTY_MEMBER"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="银行帐号(发工资)：" prop="bankAccount">
              <el-input v-model="profile.model.bankAccount" placeholder="请输入银行帐号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学历：" prop="education">
              <el-select v-model="profile.model.education" placeholder="请选择">
                <el-option label="博士" value="DOCTOR"></el-option>
                <el-option label="硕士" value="MASTER"></el-option>
                <el-option label="本科" value="UNDERGRADUATE"></el-option>
                <el-option label="专科" value="JUNIOR"></el-option>
                <el-option label="高中" value="SENIOR"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="毕业院校：" prop="school">
              <el-input v-model="profile.model.school" placeholder="请输入毕业院校"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业：" prop="speciality">
              <el-input v-model="profile.model.speciality" placeholder="请输入专业"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="毕业时间：" prop="graduationTime">
              <el-date-picker
                type="date"
                v-model="profile.model.graduationTime"
                placeholder="请选择毕业时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="职称证书：" prop="vocationalCert">
              <el-input v-model="profile.model.vocationalCert" placeholder="请输入职称证书"></el-input>
            </el-form-item>
          </el-col>-->
          <el-col :span="12">
            <el-form-item label="紧急联系人：" prop="emergencyContact">
              <el-input v-model="profile.model.emergencyContact" placeholder="请输入紧急联系人"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="紧急联系人关系：" prop="emergencyContactRelation">
              <el-input v-model="profile.model.emergencyContactRelation" placeholder="请输入紧急联系人关系"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急联系人手机号：" prop="emergencyContactMobile">
              <el-input
                v-model.number="profile.model.emergencyContactMobile"
                placeholder="请输入紧急联系人手机号码"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证号：" prop="cardId">
              <el-input v-model="profile.model.cardId" placeholder="请输入身份证号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期：" prop="birthday">
              <el-date-picker
                v-model="profile.model.birthday"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="现居住地：" prop="address">
              <el-input
                v-model="profile.model.address"
                placeholder="请输入现居住地，参考格式：X市X区(县)X路(镇/村/乡/街)X号(室/户)"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="户口地址：" prop="originalAddress">
              <el-input
                v-model="profile.model.originalAddress"
                placeholder="请输入户口地址，参考格式：X省X市X区(县)X路(镇/村/乡/街)X号(室/户)"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="profileSave('profileForm')">提 交</el-button>
      </div>
    </el-dialog>
    <user-pwd v-model="profile.isChangePassword" :showClose="false" title="系统安全策略要求你修改密码" />
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import request from "@/utils/request";
// 组件
import addCalender from "@/views/admin/calendar/addCalender.vue";
import QmFileUpload from "@/libs/components/qm-file-upload";
import Editor from "@/components/Editor";
import MeMessageView from "@/views/message/meMessage/view";
import Create from "@/views/message/unreadEffectiveMessage/create";
import UserPwd from "@/layout/components/UserPwd";
import QmCascader from "@/libs/components/qm-cascader";

export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      model: [{ url: "/getIndex", method: "get" }],
      query: [
        {
          url: "/workflow/toDoList/query",
          method: "post",
        },
        {
          url: "/workflow/doneList/query",
          method: "post",
        },
        { url: "/admin/sysNotice/selectReadNoitce", method: "post" },
        {
          url: "/message/me/query",
          method: "post",
        },
      ],
    };
  }

  mixin() {
    return {
      name: "Index",
      components: {
        QmFileUpload,
        Editor,
        Create,
        addCalender,
        UserPwd,
        QmCascader,
        MeMessageView,
      },
      data() {
        return {
          model: null,
          activeTabName: "/workflow/toDoList/list",
          workloadData: {},
          annualLeaveData: {},
          scheduleTasks: [],
          waitWorkflowData: {},
          doneWorkflowData: {},
          sysNoticeData: {},
          // 日程详情 start
          particularsView: false,
          particularsViewLoading: false,
          particularName: "detail",
          //日历选择
          dateValue: new Date(),
          //今日事项
          matter: null,
          // 参与人员
          participant: [{ userName: "" }],
          //克隆的数据
          viewModel: {},
          disposeData: [],
          // 日程详情 end
          // 通知详情 start
          noticeView: false,
          noticeViewLoading: false,
          sysNoticeDetails: {},
          noticeCategorys: [],
          // 通知详情 end
          // 消息 start
          sysMessageData: {},
          sysMessageModels: {},
          sysMessageControlData: {},
          messageView: false,
          messageViewLoading: false,
          // 添加日程弹窗控制
          scheduleVisible: false,
          sign: {
            offduty: "",
            onduty: "",
            outwork: 0,
          },
          profile: {
            notFilled: false,
            model: {},
            householdTypes: [],
          },
          rules: {
            mobile: [
              { required: true, message: "请输入手机号码", trigger: "blur" },
              {
                pattern:
                  /^0{0,1}(13[0-9]|14[01456789]|15[012356789]|16[2567]|17[012345678]|18[0-9]|19[012356789])[0-9]{8}$/,
                message: "手机号格式不对",
                trigger: "blur",
              },
            ],
            address: [
              {
                required: true,
                message:
                  "请输入现居住地，参考格式：X市X区(县/街道办)X路(镇/村/乡/街)X号(室/户/房)",
                trigger: "blur",
              },
              {
                min: 10,
                message: "长度在10个字符以上",
                trigger: "blur",
              },
              // {
              //   pattern: /^.+市.+(县|区|街道办).+(镇|村|乡|街|路)*(号|室|户|房).*$/,
              //   message:
              //     "地址格式不对，请按格式输入：X市X区(县)X路(镇/村/乡/街)X号(室/户)",
              //   trigger: "blur",
              // },
            ],
            nativePlace: [
              { required: true, message: "请输入籍贯", trigger: "blur" },
            ],
            nation: [
              { required: true, message: "请输入民族", trigger: "change" },
            ],
            cardId: [
              { required: true, message: "请输入身份证号", trigger: "blur" },
            ],
            birthday: [
              {
                required: true,
                message: "请选择出生日期",
                trigger: "change",
              },
            ],
            originalAddress: [
              {
                required: true,
                message:
                  "请输入户口地址，参考格式：X省X市X区(县)X路(镇/村/乡/街)X号(室/户)",
                trigger: "blur",
              },
              {
                min: 10,
                message: "长度在10个字符以上",
                trigger: "blur",
              },
              // {
              //   pattern:
              //     /^.+(省|自治区|直辖市).+市.+(县|区|街道办).+(镇|村|乡|街|路)*(号|室|户|房).*$/,
              //   message:
              //     "地址格式不对，请按格式输入：X省X市X区(县)X路(镇/村/乡/街)X号(室/户)",
              //   trigger: "blur",
              // },
            ],
            householdType: [
              { required: true, message: "请选择户籍类型", trigger: "blur" },
            ],
            graduationTime: [
              { required: true, message: "请选择毕业时间", trigger: "blur" },
            ],
            // vocationalCert: [
            //   { required: true, message: "请输入职称证书", trigger: "blur" },
            // ],
            emergencyContact: [
              { required: true, message: "请输入紧急联系人", trigger: "blur" },
              { min: 2, message: "不能少于2个字符", trigger: "blur" },
            ],
            emergencyContactRelation: [
              {
                required: true,
                message: "请输入紧急联系人关系",
                trigger: "blur",
              },
              { min: 2, message: "不能少于2个字符", trigger: "blur" },
            ],
            emergencyContactMobile: [
              {
                required: true,
                message: "请输入紧急联系人手机号码",
                trigger: "blur",
              },
              {
                pattern:
                  /^0{0,1}(13[0-9]|14[01456789]|15[012356789]|16[2567]|17[012345678]|18[0-9]|19[012356789])[0-9]{8}$/,
                message: "手机号格式不对",
                trigger: "blur",
              },
            ],
            maritalStatus: [
              { required: true, message: "请输入婚姻状况", trigger: "blur" },
            ],
            politicalStatus: [
              { required: true, message: "请输入政治面貌", trigger: "blur" },
            ],
            bankAccount: [
              {
                required: true,
                message: "请输入银行帐号或卡号",
                trigger: "blur",
              },
              {
                pattern: /^([1-9]{1})(\d{14}|\d{18})$/,
                message: "银行帐号或卡号格式不对",
                trigger: "blur",
              },
            ],
            education: [
              { required: true, message: "请输入学历", trigger: "blur" },
            ],
            speciality: [
              { required: true, message: "请输入专业", trigger: "blur" },
            ],
            school: [
              { required: true, message: "请输入毕业院校", trigger: "blur" },
            ],
          },
          // 消息 end
          systems: [
            {
              title: "阿里云邮箱",
              iconText: "阿",
              class: "systemIcon iconColor1",
              url: "http://mail.championsoft.cn/alimail/",
            },
            {
              title: "SVN管理系统",
              iconText: "S",
              class: "systemIcon iconColor3",
              url: "http://svn.championsoft.net/",
            },
            {
              title: "项目管理系统",
              iconText: "项",
              class: "systemIcon iconColor2",
              url: "http://pms.championsoft.net",
            },
            {
              title: "接口管理系统",
              iconText: "接",
              class: "systemIcon iconColor1",
              url: "http://api.championsoft.net",
            },
            {
              title: "开发者中心",
              iconText: "开",
              class: "systemIcon iconColor1",
              url: "http://sso.championsoft.net/docs/docsArticle/repositoryView",
            },
            {
              title: "工作流设计器",
              iconText: "工",
              class: "systemIcon iconColor4",
              url: "http://activiti.championsoft.net/activiti-explorer",
            },
            {
              title: "Maven仓库",
              iconText: "M",
              class: "systemIcon iconColor6",
              url: "http://192.168.1.171:8081/",
            },
            // {
            //   title: "NPM仓库",
            //   iconText: "N",
            //   class: "systemIcon iconColor5",
            // },
          ],
          time: [],
          nationOptions: [
            {
              label: "汉族",
              value: "汉族",
            },
            {
              label: "壮族",
              value: "壮族",
            },
            {
              label: "满族",
              value: "满族",
            },
            {
              label: "回族",
              value: "回族",
            },
            {
              label: "苗族",
              value: "苗族",
            },
            {
              label: "维吾尔族",
              value: "维吾尔族",
            },
            {
              label: "土家族",
              value: "土家族",
            },
            {
              label: "彝族",
              value: "彝族",
            },
            {
              label: "蒙古族",
              value: "蒙古族",
            },
            {
              label: "藏族",
              value: "藏族",
            },
            {
              label: "布依族",
              value: "布依族",
            },
            {
              label: "侗族",
              value: "侗族",
            },
            {
              label: "瑶族",
              value: "瑶族",
            },
            {
              label: "朝鲜族",
              value: "朝鲜族",
            },
            {
              label: "白族",
              value: "白族",
            },
            {
              label: "哈尼族",
              value: "哈尼族",
            },
            {
              label: "哈萨克族",
              value: "哈萨克族",
            },
            {
              label: "黎族",
              value: "黎族",
            },
            {
              label: "傣族",
              value: "傣族",
            },
            {
              label: "畲族",
              value: "畲族",
            },
            {
              label: "傈僳族",
              value: "傈僳族",
            },
            {
              label: "仡佬族",
              value: "仡佬族",
            },
            {
              label: "东乡族",
              value: "东乡族",
            },
            {
              label: "高山族",
              value: "高山族",
            },
            {
              label: "拉祜族",
              value: "拉祜族",
            },
            {
              label: "水族",
              value: "水族",
            },
            {
              label: "佤族",
              value: "佤族",
            },
            {
              label: "纳西族",
              value: "纳西族",
            },
            {
              label: "羌族",
              value: "羌族",
            },
            {
              label: "土族",
              value: "土族",
            },
            {
              label: "仫佬族",
              value: "仫佬族",
            },
            {
              label: "锡伯族",
              value: "锡伯族",
            },
            {
              label: "柯尔克孜族",
              value: "柯尔克孜族",
            },
            {
              label: "达斡尔族",
              value: "达斡尔族",
            },
            {
              label: "景颇族",
              value: "景颇族",
            },
            {
              label: "毛南族",
              value: "毛南族",
            },
            {
              label: "撒拉族",
              value: "撒拉族",
            },
            {
              label: "布朗族",
              value: "布朗族",
            },
            {
              label: "塔吉克族",
              value: "塔吉克族",
            },
            {
              label: "阿昌族",
              value: "阿昌族",
            },
            {
              label: "普米族",
              value: "普米族",
            },
            {
              label: "鄂温克族",
              value: "鄂温克族",
            },
            {
              label: "怒族",
              value: "怒族",
            },
            {
              label: "京族",
              value: "京族",
            },
            {
              label: "基诺族",
              value: "基诺族",
            },
            {
              label: "德昂族",
              value: "德昂族",
            },
            {
              label: "保安族",
              value: "保安族",
            },
            {
              label: "俄罗斯族",
              value: "俄罗斯族",
            },
            {
              label: "裕固族",
              value: "裕固族",
            },
            {
              label: "乌孜别克族",
              value: "乌孜别克族",
            },
            {
              label: "门巴族",
              value: "门巴族",
            },
            {
              label: "鄂伦春族",
              value: "鄂伦春族",
            },
            {
              label: "独龙族",
              value: "独龙族",
            },
            {
              label: "塔塔尔族",
              value: "塔塔尔族",
            },
            {
              label: "赫哲族",
              value: "赫哲族",
            },
            {
              label: "珞巴族",
              value: "珞巴族",
            },
          ],
        };
      },
      created() {
        this.getModel();
      },
      methods: {
        messageClose() {
          request({
            url: "/message/me/query",
            method: "post",
          })
            .then((r) => {
              if (r && !r.initMessage) {
                this.sysMessageData = r;
              } else {
                this.msgError(r.initMessage || "数据请求失败");
              }
            })
            .catch((e) => {
              this.msgError(e);
            });
        },
        back(row) {
          this.$confirm("确定撤回吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              request({
                url: "/smartform/smartForm/processRollbackAssign2",
                method: "post",
                data: { taskId: row.taskId, instanceId: row.instanceId },
              })
                .then((r) => {
                  if (r.success) {
                    this.refresh();
                    this.$message({
                      type: "success",
                      message: "撤回成功!",
                    });
                  } else {
                    this.msgError(r.message);
                  }
                })
                .catch((e) => {
                  this.msgError(e || "数据请求失败");
                });
            })
            .catch(() => {});
        },
        openUrl(url) {
          window.open(url);
        },
        //我分配的
        getAllocation() {
          request({
            url: "/admin/scheduleTask/getAllocation",
            method: "get",
          })
            .then((r) => {
              if (r && !r.initMessage) {
                this.scheduleTasks = r.parameters.scheduleTasks;
              } else {
                this.$message.error(r.initMessage || "数据请求失败");
              }
            })
            .catch((e) => {
              this.$message.error(e);
            });
        },
        //我的任务
        getTask() {
          request({
            url: "/admin/scheduleTask/getTask",
            method: "get",
          })
            .then((r) => {
              if (r && !r.initMessage) {
                this.scheduleTasks = r.parameters.scheduleTasks;
              } else {
                this.$message.error(r.initMessage || "数据请求失败");
              }
            })
            .catch((e) => {
              this.$message.error(e);
            });
        },
        handleClick() {
          //我分配的
          this.getAllocation();
        },
        fSubmit(r) {
          // 抛出事件
          this.$base.$emit("fSubmit", r);
        },
        getModel() {
          request({
            url: "/admin/scheduleTask/getEntity",
            method: "post",
          })
            .then((r) => {
              if (r && !r.initMessage) {
                this.model = r.models.model;
              } else {
                this.$message.error(r.initMessage || "数据请求失败");
              }
            })
            .catch((e) => {
              this.$message.error(e);
            });
        },
        annualLeave() {
          //路由跳转
          // window.history.pushState({},'','/admin/calendar/list')
          this.$router.push("/admin/calendar/list");
        },
        profileSave(profileForm) {
          this.$refs[profileForm].validate((valid) => {
            if (valid) {
              let postModel = _.cloneDeep(this.profile.model);
              if (postModel.nativePlace && _.isArray(postModel.nativePlace)) {
                postModel.nativePlace = postModel.nativePlace.join("");
              }
              request({
                headers: { "Content-Type": "application/json" },
                url: "/admin/sysUserProfile/updateProfile",
                method: "post",
                data: postModel,
              }).then((r) => {
                if (r && r.success) {
                  this.notifySuccess("提交成功");
                  this.profile.notFilled = false;
                } else {
                  this.$alert(r.message || "保存失败");
                }
              });
            } else {
              return false;
            }
          });
        },
        refresh() {
          request({
            url: "/workflow/toDoList/query",
            method: "post",
          })
            .then((r) => {
              if (r && !r.initMessage) {
                this.waitWorkflowData = r;
              } else {
                this.msgError(r.initMessage || "数据请求失败");
              }
            })
            .catch((e) => {
              this.msgError(e);
            });
          request({
            url: "/workflow/doneList/query",
            method: "post",
          })
            .then((r) => {
              if (r && !r.initMessage) {
                this.doneWorkflowData = r;
              } else {
                this.msgError(r.initMessage || "数据请求失败");
              }
            })
            .catch((e) => {
              this.msgError(e);
            });
        },
        waitWorkflowHandle(row) {
          this.getWorkflowArgs({ taskId: row.taskId }).then((rlt) => {
            if (rlt && rlt.appUrl && rlt.appCode) {
              this.$root.openModal(
                `${rlt.appUrl}?action=processEdit&taskId=${
                  row.taskId
                }&assigneeId=${row.assigneeId}&appCode=${rlt.appCode}&version=${
                  rlt.version
                }&_r=${new Date().getTime()}`,
                () => {
                  this.refresh();
                }
              );
            } else {
              this.notifyError("无法获取应用的处理地址");
            }
          });
        },
        showDoneWorkflow(row) {
          this.getWorkflowArgs({ taskId: row.taskId }).then((rlt) => {
            if (rlt && rlt.appUrl && rlt.appCode) {
              this.$root.openModal(
                `${rlt.appUrl}?action=processView&historyTaskId=${
                  row.taskId
                }&appCode=${rlt.appCode}&version=${
                  rlt.version
                }&_r=${new Date().getTime()}`
              );
            } else {
              this.notifyError("无法获取应用的处理地址");
            }
          });
        },
        showNotice(row) {
          this.sysNoticeDetails = row;
          this.noticeView = true;
        },
        scheduleRowClick(id) {
          this.particularsViewLoading = true;
          request({
            url: "/admin/scheduleTask/getSome",
            method: "get",
            params: {
              scheduleId: id,
            },
          })
            .then((r) => {
              if (r && !r.initMessage) {
                this.viewModel = r.parameters.scheduleTask;
                this.participant = r.parameters.users;
              } else {
                this.msgError(r.initMessage || "数据请求失败");
              }
              this.particularsViewLoading = false;
            })
            .catch((e) => {
              this.particularsViewLoading = false;
              this.msgError(e);
            });
          this.particularsView = true;
        },
        getScheduleResult() {
          request({
            url: "/admin/scheduleResult/getScheduleResult",
            method: "get",
            params: {
              scheduleId: this.viewModel.scheduleId,
            },
          })
            .then((r) => {
              if (r && !r.initMessage) {
                this.disposeData = r.parameters.results;
              } else {
                this.msgError(r.initMessage || "数据请求失败");
              }
            })
            .catch((e) => {
              this.msgError(e);
            });
        },
        particularClick(tab) {
          if (tab.name == "dispose") {
            this.getScheduleResult();
          }
        },
        particularsClose() {
          this.particularName = "detail";
        },
        showMessage(row) {
          this.messageViewLoading = true;
          request({
            url: "/message/me/getEntity",
            method: "post",
            data: {
              logId: row.logId,
              pageAction: "view",
            },
          })
            .then((r) => {
              if (r && !r.initMessage) {
                this.$util.extend(this.sysMessageData, r);
                const { controlData, models } = r;
                // this.sysMessageControlData = controlData;
                this.sysMessageModels = models.model.sysMessage;
                this.messageView = true;
              } else {
                this.msgError(r.initMessage || "数据请求失败");
              }
              this.messageViewLoading = false;
            })
            .catch((e) => {
              this.messageViewLoading = false;
              this.msgError(e);
            });
        },
        noticeCategory(categoryId) {
          let categoryName;
          if (Array.isArray(this.noticeCategorys)) {
            const findCategory = this.noticeCategorys.filter(function (item) {
              return item.categoryId === categoryId;
            });
            if (Array.isArray(findCategory) && findCategory.length > 0) {
              categoryName = findCategory[0].categoryName;
            }
          }
          return categoryName;
        },
        getTodayRecord() {
          request({
            url: "/eip/sign/record/getToday",
            method: "post",
          }).then((r) => {
            if (r && r.parameters) {
              this.sign = r.parameters;
            }
          });
        },
        getProfileStatus() {
          request({
            url: "/admin/sysUserProfile/profileStatus",
            method: "get",
          }).then((r) => {
            if (r && r.parameters) {
              this.profile = r.parameters;
              const { messageSet } = r.parameters;
              if (messageSet && messageSet.isEnabled) {
                if (messageSet.timeFrequency !== null) {
                  this.listenTodo(messageSet.timeFrequency);
                }
              }
            }
          });
        },
        listenTodo(time) {
          window.setInterval(() => {
            request({ url: "/workflow/toDoList/query", method: "post" }).then(
              (res) => {
                if (res.recordsTotal > 0) {
                  this.showDeskTopNotice(
                    "111",
                    "齐明软件综合管理平台",
                    "您有未处理的待办事项，请登录系统进行处理！"
                  );
                }
              }
            );
          }, time * 60 * 1000);
        },
        showDeskTopNotice(id, title, msg) {
          var Notification =
            window.Notification ||
            window.mozNotification ||
            window.webkitNotification;
          if (Notification) {
            Notification.requestPermission(function (status) {
              //status默认值'default'等同于拒绝 'denied' 意味着用户不想要通知 'granted' 意味着用户同意启用通知
              if ("granted" != status) {
                return;
              } else {
                var tag = "sds" + Math.random();
                var notify = new Notification(title, {
                  dir: "auto",
                  lang: "zh-CN",
                  requireInteraction: true,
                  tag: id, //实例化的notification的id
                  icon: "/kfmanage/public/assets/images/index/workerman_logo.png", //通知的缩略图,//icon 支持ico、png、jpg、jpeg格式
                  body: msg, //通知的具体内容
                });
                (notify.onclick = function () {
                  //如果通知消息被点击,通知窗口将被激活
                  window.focus();
                  notify.close();
                }),
                  (notify.onerror = function () {
                    console.log("HTML5桌面消息出错！！！");
                  });
                notify.onclose = function () {
                  console.log("HTML5桌面消息关闭！！！");
                };
              }
            });
          } else {
            console.log("您的浏览器不支持桌面消息");
          }
        },
      },
      created() {
        //请求今日事项数据
        request
          .get("/admin/scheduleTask/getTodayTask", {})
          .then((res) => {
            this.matter = res.parameters.scheduleTasks;
          })
          .catch((err) => {
            throw err;
          });
        if (this.$data && this.$data.parameters) {
          const { workload, annualLeave, scheduleTasks } =
            this.$data.parameters;
          this.workloadData = workload;
          this.annualLeaveData = annualLeave || {};
          this.scheduleTasks = scheduleTasks;
          this.waitWorkflowData = this.$data.query;
          this.doneWorkflowData = this.$data.query$1;
          this.sysNoticeData = this.$data.query$2;
          this.sysMessageData = this.$data.query$3;
          this.getTodayRecord();
          this.getProfileStatus();
        }
      },
    };
  }
}
</script>

<style scoped>
.demo-color-box {
  position: relative;
  box-sizing: border-box;
  color: #fff;
  font-size: 14px;
  height: 120px;
}

.bg-color-sub {
  width: 100%;
  height: 25px;
  left: 0;
  bottom: 0;
  position: absolute;
}

.bg-color-sub,
.demo-color-box-group .demo-color-box:last-child {
  border-radius: 0 0 4px 4px;
}

.bg-success-sub-item:first-child {
  border-radius: 0 0 0 4px;
}

.bg-success-sub-item {
  width: 50%;
  height: 100%;
  display: inline-block;
}
.top-tabs {
  background: #fff;
}
.top-tabs .badge {
  display: inline-block;
  box-sizing: content-box;
  height: 18px;
  background: #2d87ff;
  position: absolute;
  text-align: center;
  line-height: 15px;
  border-radius: 15px;
  color: #fff;
  font-weight: normal;
  width: 22px;
  top: 2px;
  padding: 0px 2px;
}

.top-tabs >>> .el-tabs__nav {
  width: 100%;
}

.top-tabs >>> .el-tabs__item:last-child {
  float: right;
}

div.el-tabs__nav div:last-child {
  float: right;
}

.ip-margin {
  margin-bottom: 26px;
}

.ip-father {
  padding: 10px;
  background-color: white;
  overflow: hidden;
}
.ip-son-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ip-son-top > span {
  font-size: 16px;
  padding-bottom: 5px;
  padding-left: 6px;
  font-weight: 600;
  font-family: PingFangSC-Semibold, PingFang SC;
}
.ip-son-top > span > i {
  color: #2d87ff;
  padding-right: 10px;
  font-size: 18px;
}
.ip-son-bottom {
  padding-top: 30px;
  width: 100%;
}
.ip-block {
  display: flex;
  justify-content: space-between;
}
.ip-flexBox {
  width: 100%;
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}
.ip-flexSon1 {
  width: 48px;
}
.ip-flexSon1-top {
  height: 48px;
  background-color: #e1eeff;
  border-radius: 8px;
  text-align: center;
  line-height: 48px;
  font-size: 22px;
  color: #2d87ff;
}
.ip-flexSon-bottom {
  margin-top: 26px;
  text-align: center;
  font-size: 11px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #61677a;
}
.ip-flexSon-bottom i {
  color: #526cd5;
}
.ip-flexSon2 .ip-flexSon-bottom i {
  color: #ec808d;
}
.ip-flexSon3 .ip-flexSon-bottom i {
  color: #f8b86a;
}
.ip-flexSon2 {
  width: 48px;
}
.ip-flexSon2-top {
  height: 48px;
  background-color: #fff1e0;
  text-align: center;
  line-height: 48px;
  font-size: 22px;
  color: #ff9f24;
  border-radius: 8px;
}
.ip-flexSon3 {
  width: 48px;
}
.ip-flexSon3-top {
  height: 48px;
  background-color: #e0f5f7;
  text-align: center;
  line-height: 48px;
  font-size: 22px;
  color: #23bcca;
  border-radius: 8px;
}
.dangerous-progress {
  color: #bbb4b4;
  font-size: 14px;
}
/* 打卡 */
.blockImg {
  width: 100px;
}
/* 通知公告 */
.ip-son-scroll {
  height: 200px;
  overflow-y: scroll;
}
.scroll-none {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: rgb(97, 103, 122);
}
.ip-son-scroll::-webkit-scrollbar {
  display: none;
}
.ip-son-content {
  padding-top: 10px;
  padding-left: 0px;
  width: 100%;
  list-style: none;
}
.ip-son-content > li {
  width: 100%;
  padding-bottom: 18px;
  font-size: 16px;
  color: #61677a;
  font-family: PingFangSC-Regular, PingFang SC;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ip-son-content > li > i {
  color: #81b7ff;
}
.letter {
  height: 60px;
}
.week-quick {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background: #fff;
}
.quick-color {
  background-color: #f6f7f9;
  font-size: 12px;
  white-space: nowrap;
}
.matter-tips {
  min-height: 400px;
  overflow: hidden;
}
.calendar-box .ip-son-bottom >>> .el-table__row {
  cursor: pointer;
}
.belowContent-left {
  margin-top: -325px;
}
.belowContent-rigth {
  float: right;
  position: relative;
}
.belowContent-rigth::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  clear: both;
}
/* 个人事项 */
.matter-top span {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
.matter-top button {
  background: #fff;
  border: 1px solid #e7ecf0;
  font-size: 16px;
}
.matter-content {
  padding: 0;
  height: 149px;
  list-style: none;
  font-size: 15px;
  color: #61677a;
  overflow-y: scroll;
}
.matter-content::-webkit-scrollbar {
  display: none;
}

.content-item {
  display: flex;
  padding-left: 8px;
}
.content-item + .content-item {
  padding-top: 16px;
}
.content-item span:first-child {
  flex: 3;
  border-right: 3px solid #2d87ff;
  padding-right: 10px;
  margin-right: 10px;
}
.content-item span:last-child {
  flex: 6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 常用系统 */
.system-col {
  margin-bottom: 10px;
}
.systemIcon {
  box-sizing: content-box;
  display: inline-block;
  border-radius: 100%;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  line-height: 26px;
  width: 23px;
  height: 23px;
  padding: 1px;
}
.iconColor1 {
  background: #2d87ff;
}
.iconColor2 {
  background: #ff9f24;
}
.iconColor3 {
  background: #23bcca;
}
.iconColor4 {
  background: #8873e8;
}
.iconColor5 {
  background: #ef6969;
}
.iconColor6 {
  background: #23caa9;
}

/* 修该elementui样式 */
.block >>> .el-tabs__header {
  position: relative;
  padding: 0;
  margin: 0;
}
.el-table >>> .el-table__body-wrapper {
  height: 600px;
  overflow-y: scroll;
}
.el-table >>> .el-table__body-wrapper::-webkit-scrollbar {
  display: none;
}
.el-steps >>> .el-step__title {
  font-size: 16px;
}
.el-steps >>> .el-step__description {
  font-size: 17px;
  font-weight: 600;
}
.el-steps >>> .el-step__title,
.el-steps >>> .el-step__description {
  color: #61677a;
  font-family: PingFangSC-Regular, PingFang SC;
}
/* 日期 */
.el-calendar >>> .current {
  border: none;
}
.el-calendar__header {
  padding: 5px 20px 12px;
}
.el-calendar >>> .el-calendar__body {
  padding: 12px 20px 20px;
}
.el-calendar >>> .is-today {
  background: #2d87ff;
  border-radius: 100%;
  color: #ffffff;
  width: 30px;
}
.el-calendar >>> .el-calendar-day {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-calendar >>> .el-calendar-day:hover {
  color: #000000;
}
.el-calendar >>> td {
  border: none;
}
.el-calendar >>> tr:first-child td {
  border: none;
}
/* 档案弹窗 */
.el-form-item >>> .el-form-item__error {
  margin-top: 0;
}
</style>

